import React, {Component} from "react";
import { Checkbox, Button } from 'antd';

export default class Item extends Component{
    state = {mouse: false}
    checkChange = (event) => {
        const {id, onChange} = this.props
        onChange(id, event.target.checked)
    }
    deleteItem = () => {
        const {id, deleteItem} = this.props
        deleteItem(id)
    }
    handleMouse = (flage) => {
        return () => {
           this.setState({mouse: flage})
        }
    }
    render(){
        const {name, done} = this.props
        return(
            <li onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
                <label>
                    <Checkbox checked={done} onChange={this.checkChange}>{name}</Checkbox>
                </label>
                <Button onClick={this.deleteItem} style={{display: this.state.mouse ? 'inline-block' : 'none'}}>删除</Button>
            </li>
        )
    }
}